<template>
  <div id="Order">
    <div class="box">
      <div class="box_header">
        <div>时间范围</div>
        &nbsp;
        <div class="block">
          <el-date-picker v-model="valueTime" type="datetimerange" start-placeholder="Start date"
            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss" @change="changeTime" />
        </div>
        &nbsp;
        <div>
          <el-button type="primary" @click="handleGoodsFind">查询</el-button>
        </div>
      </div>
      <div class="box_body">
        <div id="main" style="width: 80vw;height:40vh;"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchLoginTwentyFive } from '../../api/index';
//引入echarts图
import * as echarts from 'echarts';
const valueTime = ref('')

//获取起始和结束时间
function changeTime(val: any) {
  //console.log(val[0]);
  //console.log(val[1]);

  //起始时间转换
  const dateObjStart = new Date(val[0]);
  const formattedDateStart = ref(
    `${dateObjStart.getFullYear()}-${String(dateObjStart.getMonth() + 1).padStart(2, '0')}-${String(dateObjStart.getDate()).padStart(2, '0')} ${String(dateObjStart.getHours()).padStart(2, '0')}:${String(dateObjStart.getMinutes()).padStart(2, '0')}:${String(dateObjStart.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateStart.value);//转换成功

  //截至时间转换
  const dateObjEnd = new Date(val[1]);
  const formattedDateEnd = ref(
    `${dateObjEnd.getFullYear()}-${String(dateObjEnd.getMonth() + 1).padStart(2, '0')}-${String(dateObjEnd.getDate()).padStart(2, '0')} ${String(dateObjEnd.getHours()).padStart(2, '0')}:${String(dateObjEnd.getMinutes()).padStart(2, '0')}:${String(dateObjEnd.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateEnd.value);//转换成功

  startTime.value = formattedDateStart.value;
  endTime.value = formattedDateEnd.value;
}

//通过得到的时间获取数据
const startTime = ref('2019-10-10 00:00:00');
const endTime = ref('2024-11-08 00:00:00');

//onMounted钩子函数在页面加载时加载echarts图
onMounted(() => {

})

//拿到echarts图的数据
const handleGoodsFind = async () => {
  //console.log(startTime.value,endTime.value);
  const res = await fetchLoginTwentyFive({ date: JSON.stringify([startTime.value, endTime.value]) });
  console.log(res.data.data);
  const myArray = res.data.data;

  //时间格式转换
  //日期转换
  function formatDateTime(dateTimeStr: any) {
    const date = new Date(dateTimeStr);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');

    //
    const offsetHours = 8; // UTC+8
    const localHours = date.getUTCHours() + offsetHours;
    return `${year}-${month}-${day} ${localHours}:${minutes}:${seconds}`;
  }

  //cs
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  // 指定图表的配置项和数据
  // 使用刚指定的配置项和数据显示图表。
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line' // 折线图使用 'line' 类型的 axisPointer
      }
    },
    legend: {
      data: ['订单统计']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: myArray.map((item: any) => formatDateTime(item.orderTime)),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '订单统计',
        type: 'line', // 这是折线图的类型
        data: myArray.map((item: any) => item.orderAmount),
        label: {
          show: true,
          position: 'top', // 标签显示在数据点的上方
          rotate: 45, // 旋转45度
          formatter: '{c}' // 显示数据值
        }
      }
    ]
  };
  myChart.setOption(option);
}
</script>

<style scoped>
.box {
  width: 85vw;
  height: 40vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  display: flex;
  line-height: 3vw;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {

  >div {
    height: 1.5vw;
    font-size: 1vw;
    position: relative;
    right: 1.5vw;
  }
}

#main {
  position: relative;
  left: 2vw;
}
</style>